import React, { Component } from 'react';
import { Card, List } from 'antd';
import { reqGetCategory } from '../../api';
import './detail.css'
import { ArrowLeftOutlined } from '@ant-design/icons'
// 产品的详情组件
class ProductDetail extends Component {
    constructor(props) {
        super();
        this.state = {
            card: {
                title: (
                    <span onClick={this.gouback} className='card-tit'>
                        <ArrowLeftOutlined /><span style={{ marginLeft: 10 }}>返回上级</span>
                    </span>
                )
            },
            data: {}, // 展示的数据
            typename: '',
        }
    }
    // =================constructor结束
    gouback = () => {
        this.props.history.goBack()
    }
    async changeIdToMsg(id) {
        let res = await reqGetCategory();
        let msg = res.data.find(item => {
            return item.id == id
        })
        this.setState({
            typename: msg.typename
        })
    }
    componentDidMount() {
        console.log(this.props.location.state);
        this.changeIdToMsg(this.props.location.state.typeid);
        this.setState({
            data: this.props.location.state
        })
    }
    render() {
        const { card, data, typename } = this.state
        return (
            <>
                <Card title={card.title}>
                    <List
                        header={<span className='list-header'>数据信息</span>}
                        bordered
                        // loading={true}
                        style={{ height: '100%' }}
                    >
                        <List.Item>
                            <span className='list-tit'>编号:</span>
                            <span style={{ float: 'left' }}>{data.id}</span>
                        </List.Item>
                        <List.Item>
                            <span className='list-tit'>状态:</span>
                            <span>{data.state == 1 ? '在售' : '已下架'}</span>
                        </List.Item>
                        <List.Item>
                            <span className='list-tit'>类别:</span>
                            <span>{typename}</span>
                        </List.Item>
                        <List.Item>
                            <span className='list-tit'>名称:</span>
                            <span>{data.name}</span>
                        </List.Item>
                        <List.Item>
                            <span className='list-tit'>价格:</span>
                            <span>{data.price}</span>
                        </List.Item>
                        <List.Item>
                            <span className='list-tit'>描述信息:</span>
                            <span>{data.info}</span>
                        </List.Item>

                    </List>
                </Card>
            </>
        );
    }
}

export default ProductDetail;